<template>
  <VPdf ref="pdfRef" id="pdfPay" title="采购对账单" font-size="12" width="1200px">
    <div class="bill-print flex flex-col border-l border-t text-gray-950">
      <div class="border-b border-r px-2">
        <div class="text-center font-bold" style="font-size: 24px;">{{ form.basic.company_name }}</div>
        <div class="text-center font-bold" style="font-size: 24px;">{{form.basic.month}}月<span class="ml-2"></span>采购对账单</div>
        <div class="grid grid-cols-4 my-2">
          <div>对账联系人: {{ form.basic.payee }}</div>
          <div>结算方式: {{ form.basic.period_name }}</div>
          <div>联系电话: {{form.basic.phone}}</div>
          <div>地址: {{ form.basic.company_address }}</div>
        </div>
        <div class="mb-3">对账时间: {{ form.basic.year }}年{{ form.basic.month }}月</div>
      </div>
      <div class="grid" style="grid-template-columns: repeat(37, minmax(0, 1fr))">
        <div class="col-span-1 border-b border-r p-2 text-center">序号</div>
        <div class="col-span-3 border-b border-r p-2 text-center">入库时间</div>
        <div class="col-span-2 border-b border-r p-2 text-center">入库仓库</div>
        <div class="col-span-3 border-b border-r p-2 text-center">采购员</div>
        <div class="col-span-3 border-b border-r p-2 text-center">下单时间</div>
        <div class="col-span-3 border-b border-r p-2 text-center">采购单号</div>
        <div class="col-span-2 border-b border-r p-2 text-center">系统SKU</div>
        <div class="col-span-6 border-b border-r p-2 text-center">货品名称</div>
        <div class="col-span-2 border-b border-r p-2 text-center">下单数量</div>
        <div class="col-span-2 border-b border-r p-2 text-center">入库数量</div>
        <div class="col-span-2 border-b border-r p-2 text-center">含税单价</div>
        <div class="col-span-2 border-b border-r p-2 text-center">含税金额</div>
        <div class="col-span-3 border-b border-r p-2 text-center">下单号对应金额</div>
        <div class="col-span-3 border-b border-r p-2 text-center">备注</div>

        <template v-for="(d, i) in form.purchaseList" :key="i">
          <div class="col-span-1 border-b border-r p-2 text-center whitespace-pre-wrap">{{ i+1 }}</div>
          <div class="col-span-3 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.create_time }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.destination_warehouse_name }}</div>
          <div class="col-span-3 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.purchase_user_name }}</div>
          <div class="col-span-3 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.create_time }}</div>
          <div class="col-span-3 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.purchase_no }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.sku }}</div>
          <div class="col-span-6 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.sku_cn_title }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.purchase_num }}&nbsp;</div>
          <div class="col-span-2 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.num }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.unit_price_tax }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.total_price_tax }}</div>
          <div class="col-span-3 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.is_drawback === 2 ? d.total_purchase_price_tax : d.total_purchase_price }}</div>
          <div class="col-span-3 border-b border-r p-2 text-center whitespace-pre-wrap">{{ d.remark }}</div>
        </template>
      </div>
      <div class="col-span-1 border-b border-r p-2">
        <div>收款信息: {{ form.basic.supplier_name }}</div>
        <div>开户名: {{ form.basic.payee }}</div>
        <div>账号: {{ form.basic.collect_account }}</div>
        <div>开户银行（含支行）: {{ form.basic.collect_bank }}</div>
      </div>
      <div class="grid grid-cols-12">
        <div class="col-span-9">
          <div class="grid grid-cols-12">
            <div class="col-span-3 border-b border-r p-2">供方签名: </div>
            <div class="col-span-4 border-b border-r p-2"></div>
            <div class="col-span-2 border-b border-r p-2">日期: </div>
            <div class="col-span-3 border-b border-r p-2"></div>
            <div class="col-span-3 border-b border-r p-2">需方签名: </div>
            <div class="col-span-4 border-b border-r p-2"></div>
            <div class="col-span-2 border-b border-r p-2">日期: </div>
            <div class="col-span-3 border-b border-r p-2"></div>
            <div class="col-span-full border-b border-r p-2">1、请将此采购对账单以EXCEL表格和扫描件(加盖公章或财务)发到我司采购部核对;</div>
            <div class="col-span-full border-b border-r p-2">2、请贵公司于每月的5日前将对账资料发给我司，以免货款结算周期(举例:核对10月货款，11月5日前将对账资料;</div>
            <div class="col-span-full border-b border-r p-2">3、请务必将本对账单打印出来盖章和发票一起寄到我司，否则发票退回，货款延迟!</div>
            <div class="col-span-full border-b border-r p-2">4、对账单及发票邮寄地址，深圳市龙岗区坂田街道东海王大厦4楼信诚创新技术有限公司，{{form.basic.shipping_person_name}}收，{{form.basic.shipping_person_phone}}
            </div>
          </div>
        </div>
        <div class="col-span-3 border-b border-r p-2 flex flex-col justify-center">
          <div>供应商名称: {{ form.basic.supplier_name }}</div>
          <div>( 盖章 )</div>
        </div>
      </div>
    </div>
    <template v-if="isLook" #footer>
      <el-button @click="pdfRef.close()">关 闭</el-button>
    </template>
  </VPdf>
</template>

<script setup>
import VPdf from '@/components/VPdf'
import api from '../api'
import XEUtils from 'xe-utils'

const form = ref({})
const pdfRef = ref()
const isLook = ref(false)
const getForm = async (cb_id) => {
  const res = await api.templateDetail({ cb_id })
  form.value = res.data
}
const view = async (row, closeLoading) => {
  isLook.value = true
  await getForm(row.cb_id)
  await pdfRef?.value.open('对账单模板' + XEUtils.toDateString(Date.now(), 'yyyyMMddHHmmss'))
  closeLoading()
}
const pdf = async (row, closeLoading) => {
  isLook.value = false
  await getForm(row.cb_id)
  await pdfRef?.value.open('对账单模板' + XEUtils.toDateString(Date.now(), 'yyyyMMddHHmmss'))
  await pdfRef?.value.start()
  closeLoading()
  pdfRef?.value.close()
}

defineExpose({ view, pdf })
</script>

<style lang="scss">
.bill-print {
  border-color: #333;
  * {
    border-color: #333;
  }
}
</style>